<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src='./jquery-1.9.1.min.js'></script>
	<link rel="stylesheet" href="animate.css">
	<style>
		*{
			margin:0px;
			padding:0px;
		}
		body{
			background: #000;
		}
		ul,li{
			text-decoration: none;
			list-style: none;
		}
		#tcn{
			position: fixed;
			width:100%;
			height:100%;
			top:0px;
			left: 0px;
			background: #000;
		}
		#tcn img{
			max-width:100%;
			max-height: 100%;

		}
	</style>
</head>
<body>
	<ul style="overflow: hidden;">
		<!-- <li><img src="./img/1.jpg" alt=""></li> -->
	</ul>
	<div id="tcn" style="display: none;">
		<img src="./img/1.large.jpg" alt="">
	</div>
	<script>
		var total=17;
		var str='';
		var jianxi=3;
		var divW=($(document).width()-jianxi*3)/4;
		for(var i=1;i<=17;i++){
			if(i%4==0){
				jianxi=0;
			}else{
				jianxi=3;
			}
			str+='<li class="animated bounceIn" style="width:'+divW+'px; height:'+divW+'px; overflow:hidden; margin-right:'+jianxi+'px;float:left;"><img  src="./img/'+i+'.jpg" alt=""></li>';
		}
		$('ul').append(str);
		$('ul li').click(function(){
		    index=$(this).index();			
            loadimg($(this).index());
		});

		function loadimg(num){
			var src='./img/'+(num+1)+'.large.jpg';
            $('#tcn img').attr('src','./img/'+(num+1)+'.large.jpg');
            //判断显示的位置
            var imgObj=new Image();
            imgObj.src=src;
            imgObj.onload=function(){
            	if(this.height/this.width>1.2){
            		//竖着显示
            		$('#tcn img').css('height','100%');
            		var mart_left=($(window).width()-$('#tcn img')[0].clientWidth)/2;
            		$('#tcn img').css('margin-left',mart_left+'px');
            	}else{
            		//横着显示
            		$('#tcn img').css('width','100%');
            		var mart_top=($(window).height()-$('#tcn img')[0].clientHeight)/2;
            		$('#tcn img').css('margin-top',mart_top+'px');

            	}
            }
            $('#tcn').show();
		}
		//左右滑动
		$('#tcn img')[0].addEventListener('touchstart',function(e){
			e.preventDefault();
             touchX=e.touches[0].pageX;
             console.log(touchX);
		});
		$('#tcn img')[0].addEventListener('touchmove',function(e){
			cha=e.touches[0].pageX-touchX;
			});
		var allow=true;
		$('#tcn img')[0].addEventListener('touchend',function(e){
             if(cha>0){
                //向右滑动
                if(allow==false){
                	return;
                }
                allow=false;
                index--;
                 $('#tcn img').addClass('animated bounceInLeft');
//				 动画效果执行完毕后执行
                 $('#tcn img')[0].addEventListener('webkitAnimationEnd',function(){
             		$('#tcn img').removeClass('animated bounceInLeft');
             		allow=true;
             	});
                loadimg(index);
             }else{
             	//向左滑动
             	  if(allow==false){
                	return;
                }
             	index++;
             	allow=false;
             	$('#tcn img').addClass('animated bounceInRight');
             	$('#tcn img')[0].addEventListener('webkitAnimationEnd',function(){
             		$('#tcn img').removeClass('animated bounceInRight');
             		allow=true;
             	});
                loadimg(index);

             };
		});
	</script>
</body>
</html>